<template>
  <div style="margin: 15px; margin-right: 30px;">
    <el-form ref="form" :rules="rules" :model="form" label-width="120px" :disabled="true">
      <el-row>
        <el-col :span="12">
          <el-form-item label="车牌号" prop="licenseNumber">
            <el-input v-model="form.licenseNumber" placeholder="请输入车牌号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车主姓名" prop="owner">
            <el-input v-model="form.owner" placeholder="请输入车主姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车型" prop="classificationCode">
            <el-select v-model="form.classificationCode" placeholder="请选择车型" clearable>
              <el-option
                v-for="item in parentData.vehicleClassificationList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车长" prop="length">
            <el-select v-model="form.length" placeholder="请选择车长" clearable>
              <el-option
                v-for="item in parentData.vehicleLengthList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车宽" prop="width">
            <el-select v-model="form.width" placeholder="请选择车宽" clearable>
              <el-option
                v-for="item in parentData.vehicleWidthList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车高" prop="height">
            <el-select v-model="form.height" placeholder="请选择车高" clearable>
              <el-option
                v-for="item in parentData.vehicleHighList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车身自重" prop="selfRespect">
            <el-select v-model="form.selfRespect" placeholder="请选择车身自重" clearable>
              <el-option
                v-for="item in parentData.vehicleTonnageList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车架号" prop="vin">
            <el-input v-model="form.vin" placeholder="请输入后6位车架号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆载重" prop="loadWeight">
            <el-select v-model="form.loadWeight" placeholder="请选择车辆载重" clearable>
              <el-option
                v-for="item in parentData.vehicleTonnageList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="定位来源" prop="locationSource">
            <el-select v-model="form.locationSource" placeholder="请选择定位来源" clearable>
              <el-option
                v-for="item in parentData.locationSourceList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总重量" prop="totalWeight">
            <el-select v-model="form.totalWeight" placeholder="请选择总重量" clearable>
              <el-option
                v-for="item in parentData.vehicleTonnageList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入网标志" prop="netStatus">
            <el-select v-model="form.netStatus" placeholder="请选择入网标志" clearable>
              <el-option
                v-for="item in radioOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="道路运输证号" prop="roadTransportCertificateNumber">
            <el-input v-model="form.roadTransportCertificateNumber" placeholder="请输入道路运输证号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="道路运输证到期" prop="roadTransportCertificateDate">
            <el-date-picker
              v-model="form.roadTransportCertificateDate"
              type="date"
              placeholder="道路运输证到期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行驶证到期日期" prop="vehicleLicenseDueDate">
            <el-date-picker
              v-model="form.vehicleLicenseDueDate"
              type="date"
              placeholder="行驶证到期日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶证到期日期" prop="issueDate">
            <el-date-picker
              v-model="form.issueDate"
              type="date"
              placeholder="驾驶证到期日期"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有无挂车" prop="isHasTrailer">
            <el-select v-model="form.isHasTrailer" placeholder="请选择有无挂车" clearable>
              <el-option
                v-for="item in radioOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌颜色" prop="vehicleLicenseColor">
            <el-select v-model="form.vehicleLicenseColor" placeholder="请选择车牌颜色" clearable>
              <el-option
                v-for="item in vehicleLicenseColorList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="照片上传">
            <div class="custom-grid">
              <el-form-item prop="vehicleLicenseImg">
                <el-upload
                  v-model="form.vehicleLicenseImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateImgSuccess('vehicleLicense', res, file) }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.vehicleLicenseImg" :src="form.vehicleLicenseImg" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">行驶证照片</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="roadTransportCertificateImg">
                <el-upload
                  v-model="form.roadTransportCertificateImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateImgSuccess('roadTransportCertificate', res, file) }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img
                    v-if="form.roadTransportCertificateImg"
                    :src="form.roadTransportCertificateImg"
                    class="avatar"
                  >
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">道路运输证照片</div>
            </div>
            <div class="custom-grid">
              <el-form-item prop="vehicleImg">
                <el-upload
                  v-model="form.vehicleImg"
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :on-success="(res, file)=>{ handleUpdateImgSuccess('vehicle', res, file) }"
                  :before-upload="beforeAvatarUpload"
                  :headers="getAuthorization()"
                >
                  <img v-if="form.vehicleImg" :src="form.vehicleImg" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
              <div style="margin-top: 8px;">车辆照片</div>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getVehicle, addOrUpdateVehicle } from '@/api/driver'
export default {
  name: 'VehicleDetail',
  props: {
    parentData: {
      type: Object,
      default() {
        return {
          vehicleClassificationList: [],
          vehicleLengthList: [],
          vehicleWidthList: [],
          vehicleHighList: [],
          vehicleTonnageList: [],
          locationSourceList: []
        }
      }
    }
  },
  data() {
    return {
      uploadUrl: this.BASE_API_URL + 'ntocc-tps-api/fileUpload',
      emptyForm: {},
      form: {
        classificationCode: '',
        roadTransportCertificateDate: '',
        isHasTrailer: '',
        height: '',
        length: '',
        locationSource: '',
        netStatus: '',
        roadTransportCertificateNumber: '',
        selfRespect: '',
        vehicleLicenseColor: '',
        licenseNumber: '',
        owner: '',
        width: '',
        vin: '',
        vehicleLicenseDueDate: '',
        issueDate: '',
        loadWeight: '',
        totalWeight: '',
        vehicleLicenseImg: '',
        roadTransportCertificateImg: '',
        vehicleImg: ''
      },
      radioOptions: [{ label: '有', value: '1' }, { label: '无', value: '0' }],
      vehicleLicenseColorList: [
        { label: '蓝色', value: '1' },
        { label: '黄色', value: '2' },
        { label: '黑色', value: '3' },
        { label: '白色', value: '4' },
        { label: '绿色', value: '5' },
        { label: '其他', value: '9' },
        { label: '农黄色', value: '91' },
        { label: '农绿色', value: '92' },
        { label: '黄绿色', value: '93' },
        { label: '渐变绿', value: '94' }
      ],
      rules: {
        classificationCode: [
          { required: true, message: '请选择车型', trigger: 'change' }
        ],
        roadTransportCertificateDate: [
          { required: false, message: '请选择道路运输证到期', trigger: 'change' }
        ],
        isHasTrailer: [
          { required: false, message: '请选择有无挂车', trigger: 'change' }
        ],
        height: [{ required: false, message: '请选择车高', trigger: 'change' }],
        length: [{ required: false, message: '请选择车长', trigger: 'change' }],
        locationSource: [
          { required: false, message: '请选择定位来源', trigger: 'change' }
        ],
        netStatus: [
          { required: false, message: '请选择入网标志', trigger: 'change' }
        ],
        roadTransportCertificateNumber: [
          { required: true, message: '请输入道路运输证号', trigger: 'blur' }
        ],
        selfRespect: [
          { required: false, message: '请选择车身自重', trigger: 'change' }
        ],
        vehicleLicenseColor: [
          { required: false, message: '请选择车牌颜色', trigger: 'change' }
        ],
        licenseNumber: [
          { required: true, message: '请输入车牌号', trigger: 'blur' }
        ],
        owner: [
          { required: false, message: '请输入车主姓名', trigger: 'blur' }
        ],
        width: [{ required: false, message: '请输入车宽', trigger: 'blur' }],
        vin: [
          { required: false, message: '请输入后6位车架号', trigger: 'blur' }
        ],
        vehicleLicenseDueDate: [
          { required: false, message: '行驶证到期日期', trigger: 'blur' }
        ],
        issueDate: [
          { required: false, message: '驾驶证到期日期', trigger: 'blur' }
        ],
        loadWeight: [
          { required: true, message: '请选择车辆载重', trigger: 'change' }
        ],
        totalWeight: [
          { required: true, message: '请选择车辆总重量', trigger: 'change' }
        ],
        vehicleLicenseImg: [
          { required: true, message: '请上传行驶证照片', trigger: 'blur' }
        ],
        roadTransportCertificateImg: [
          { required: false, message: '请上传道路运输证照片', trigger: 'blur' }
        ],
        vehicleImg: [
          { required: false, message: '请上传车辆照片', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  created() {
    // 保存空表单对象
    this.emptyForm = JSON.parse(JSON.stringify(this.form))
  },
  methods: {
    getInfo(code) {
      this.form = this.emptyForm
      getVehicle(code).then(response => {
        response.data.locationSource = response.data.locationSource.toString()
        response.data.netStatus = response.data.netStatus.toString()
        response.data.isHasTrailer = response.data.isHasTrailer.toString()
        this.form = response.data
      })
    },
    handleUpdateImgSuccess(type, res, file) {
      switch (type) {
        case 'vehicleLicense':
          this.form.vehicleLicenseImg = res.data
          break
        case 'roadTransportCertificate':
          this.form.roadTransportCertificateImg = res.data
          break
        case 'vehicle':
          this.form.vehicleImg = res.data
          break
      }
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === 'image/jpeg' ||
        file.type === 'image/bmp' ||
        file.type === 'image/png'
      const isLtnM = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG,BMP,PNG 格式!')
      }
      if (!isLtnM) {
        this.$message.error('上传图片大小不能超过 10MB!')
      }
      return isJPG && isLtnM
    }
  }
}
</script>
<style scoped>
.custom-grid {
  display: inline-block;
  font-size: 14px;
  color: #8c939d;
  margin-right: 20px;
}
.avatar-uploader /deep/.el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  box-sizing: border-box;
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
  border-width: 1px;
  border-style: dashed;
  border-color: #c0ccda;
}
.avatar-uploader-icon:hover {
  border-color: #409eff;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.el-cascader {
  width: 100%;
}
.el-select {
  width: 100%;
}
.el-date-editor {
  width: 100%;
}
</style>
